<template>
  <div class="login">

    <main>
      <div class="login_input">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item prop="username">
            <el-input v-model="ruleForm.username"></el-input>
          </el-form-item>
          <el-form-item prop="password"  >
            <el-input v-model="ruleForm.password" text="password"></el-input>
          </el-form-item>
          <el-form-item>
            &emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;&emsp; &emsp;
            <el-button type="primary" @click="submitForm('ruleForm')" class="button">登录</el-button>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
          </el-form-item>
        </el-form>
      </div>
    </main>
  </div>
</template>

<script>
import axios from "../utils/request";
export default {
  data() {
    return {
      // username: "",
      // password: ""
      ruleForm: {},
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  methods: {
    // async submit() {
    //   let res = await axios.post("/login", {
    //     username: this.username,
    //     password: this.password
    //   });
    //   if (res.data.code === 1) {
    //     sessionStorage.setItem("token", res.data.token); //将token保存在本地
    //     this.$router.push("/home");
    //   }
    //   localStorage.setItem("username", res.data.data.username);
    // }
    //登录
    submitForm(ref) {
      this.$refs[ref].validate(valid => {
        if (valid) {
          axios({
            url: "/api/login",
            method: "post",
            data: this.ruleForm
          }).then(res => {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "success"
            });
            //将我们的用户名和密码传回token，从而达到登录的效果
            localStorage.setItem("token", res.data.token);
            //把我的用户名，本地存储传回后端
            localStorage.setItem("username", res.data.data.username);
            //判断是否登录成功,然后跳转页面
            this.$router.push("/about");
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  }
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}
#app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.login {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-image: url("https://wx4.sinaimg.cn/mw690/df2c3b44gy1ggcl7ya4x1j20u01sy1bz.jpg");
}
.login_input {
  width: 90%;
  height: 230px;
  margin-top: 230px;
  margin-left: 20px;
  // border: 1px solid #000;
  // border-bottom: 4px solid rgba(0, 0, 0, .1);
    // filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));
     -moz-box-shadow: inset 0 0 10px rgba(201, 214, 243, 1);
     -webkit-box-shadow: inset 0 0 -10px rgba(201, 214, 243, 1);
     box-shadow: inset 0 0 10px rgb(241, 245, 242);
}
.demo-ruleForm {
  margin-left: -80px;
  margin-top: 10px;
}
.el-form-item__content{
  width: 74%;
  line-height: 10px;
  margin-top: 15px;
}
header {
  height: 60px;
  display: flex;
  line-height: 60px;
  justify-content: center;
  font-size: 20px;
  color: #ffffff;
  font-weight: bold;
  background: linear-gradient(
    45deg,
    rgb(65, 125, 236),
    rgb(86, 141, 243),
    rgb(113, 158, 241)
  );
}
header span {
  margin-left: 10px;
}
main {
  flex: 1;
  overflow-y: auto;
}
.img {
  display: flex;
  justify-content: center;
}
.button{
  background: rgba(79, 109, 80, 0.5);
  border: 1px solid #5c5b5b;
  color: rgba(247, 224, 194, 0.5);
}
</style>
